<template>
  <div id="app">
    <nav>
      <!-- 导航链接 -->
      <router-link to="/welcome">欢迎页</router-link> |
      <a href="javascript:;" @click="goHome()">首页</a> |
      <router-link to="/news-list">新闻列表</router-link> |
      <a href="javascript:;" @click="goAbout()">关于我们</a>
    </nav>
    <!-- 路由视图容器 -->
    <router-view class="container"></router-view>
  </div>
</template>


<script>
export default {
  name: 'App',
  methods: {
    goHome() {
      console.log("通过编程式路由跳转到首页")
      this.$router.push('/');
    },
    goAbout() {
      console.log("通过编程式路由跳转到关于我们")
      // 注意，这里使用的是 path 属性来指定路由
      this.$router.push({ path: '/about', query: { id: 1 } });
    }
  }
}
</script>

<style>
.container {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid #ddd;
  width: 600px;
  height: 500px;
  margin: 0 auto;
  margin-top: 20px;

}

#app {
  text-align: center;
  width: 800px;
  margin: 0 auto;

  margin-top: 60px;
}
</style>